<template>
  <div class="wrapper">
    <div class="t-con">
			<div class="sub-con">
				<div class="sub-sub-con place-schedule">
					<div id="place-name" class="border-radius-10" style="border-radius:0.5rem 0 0 0.5rem;">A</div>
					<div id="schedule-code" class="border-dashed border-radius-10" style="border-radius: 0 0.5rem 0.5rem 0;border-left:none">004</div>
				</div>
			</div>
			<div class="sub-con">
				<div class="sub-sub-con border-dashed border-radius-10" id="matchLevel">示范组团体亚运会新品势示范组Saebyeol</div>
				<div class="sub-sub-con" id="category-title">
					<div class="border-dashed border-radius-10">决赛</div>
					<div class="border-dashed border-radius-10" style="margin-left: .8rem;">品势／<span id="psEntry">暂无数据</span>
					</div>
				</div>
			</div>
			<div class="sub-con">
				<div class="sub-sub-con border-dashed border-radius-10" id="timer">
					<i class="fa fa-pause-circle-o color-white" style="display: none;"></i>
					<i class="fa fa-clock-o color-white" style="display: none;"></i>
					<span id="count-down">01:30</span>
				</div>
			</div>
    </div>
    <div class="b-con">
			<div class="sub-con">
				<div class="sub-sub-con team-name border-radius-10" id="blueTeam">中山敬杰训练馆</div>
				<div class="sub-sub-con player blue border-dashed border-radius-10" id="bluePlayer"> 贾嘉豪 尹高嘉 郭昊楠</div>
				<div class="sub-sub-con team-name border-radius-10" id="redTeam" style="display: none;">暂无数据</div>
				<div class="sub-sub-con player red border-dashed border-radius-10" id="redPlayer" style="display: none;">暂无数据</div>
			</div>
			<!-- <div class="sub-con">
				<div class="sub-sub-con rank border-dashed border-radius-10">
					<ol id="ranking" style="display: none;">
						<li>aaaaaa(bb)</li>
						<li>aaaaaa(bb)</li>
						<li>aaaaaa(bb)</li>
						<li>aaaaaa(bb)</li>
						<li>aaaaaa(bb)</li>
						<li>aaaaaa(bb)</li>
						<li>aaaaaa(bb)</li>
						<li>aaaaaa(bb)</li>
					</ol>
				</div>
			</div> -->
			<div class="sub-con">
				<div class="sub-sub-con point border-dashed border-radius-10" id="accuracy" style="display: flex;"></div>
				<div class="sub-sub-con point border-dashed border-radius-10" id="expressiveness" style="display: flex;"></div>
				<div class="sub-sub-con sum-point border-dashed border-radius-10 red" id="score"></div>
			</div>
    </div>
	</div>
</template>
<script>
import { getMatchScore } from '@/api/matchScore'
export default {
  data() {
    return {

    }
  },
  created() {
    this.getMatchScore()
  },
  methods: {
    getMatchScore() {
      var obj = {
        matchId: 98,
        matchAdminId: 8888
      }
      getMatchScore(obj).then(res => {
        console.log(res)
      })
    }
  }
}
</script>

<style>
html{
	font-size: 30px;
}
</style>

<style scoped>
.wrapper {
    margin: 0;
    height: 100%;
    color: #fff;
    font-size: 1rem;
    line-height: 1;
}
.wrapper {
	    
            height: 100%;
            background-color: #000;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            padding: .8rem;
        }

        .t-con {
            -webkit-box-flex: 0;
            -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            /*background-color: #1295bf;*/
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }

        .b-con {
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            margin-top: .8rem;
            /*background-color: #EA5C54;*/
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }

        .sub-con {
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            width: 33.33%;
            margin-left: .8rem;
            /*background-color: #00a65a;*/
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
        }

        .sub-con:first-of-type {
            margin-left: 0;
        }

        .sub-sub-con {
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            margin-bottom: .8rem;
            /*background-color: #e47365;*/
        }

        .sub-sub-con:last-of-type {
            margin-bottom: 0;
        }

        .place-schedule {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }

        #place-name {
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            font-size: 4rem;
            background-color: #fff;
            color: #000;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            padding: 0 10px;
            font-weight: bold;
        }

        #schedule-code {
            font-size: 3rem;
            color: #fff;
            -webkit-box-flex: 0;
            -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            padding: 0 20px;
            font-weight: bold;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
        }

        #timer {
            font-size: 2.8rem;
            color: #3875d7;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            /*padding: 0 40px;*/
            font-weight: bold;
        }

        #timer .fa {
            margin-right: 0.5rem;
        }

        #matchLevel {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            padding: 0.2rem 0.5rem;
            line-height: 1.2;
        }

        #category-title {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            font-size: .8rem;
        }

        #category-title div {
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            padding: 0.2rem 0.5rem;
        }

        .team-name {
            -webkit-box-flex: 0;
            -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            background-color: #fff;
            color: #000;
            padding: .5rem 0;
        }

        .player {
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            color: #fff;
            font-size: 1.6rem;
            text-align: center;
        }

        .rank ol {
            padding: 10px 2rem;
            margin: 0;
        }

        .rank li {
            padding: 0;
            margin: 0;
            list-style: decimal;
            word-break: break-all;
            line-height: 1.4;
        }

        .point {
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 20%;
            -ms-flex: 1 1 20%;
            flex: 1 1 20%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            color: #fff;
            font-size: 1.6rem;
        }

        .sum-point {
            -webkit-box-flex: 1;
            -webkit-flex: 1 1 60%;
            -ms-flex: 1 1 60%;
            flex: 1 1 60%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            color: #fff;
            font-size: 5.5rem;
            font-weight: bold;
        }

        .border-radius-10 {
            border-radius: 0.5rem;
        }

        .border-dashed {
            border: 1px dashed #fff;
        }

        .border-solid {
            border: 1px solid #fff;
        }

        .color-white {
            color: #fff;
        }

        .bg-white {
            background-color: #fff;
        }

        .sum-point.red {
            color: #ed2433;
            /*border-color: #ed2433;*/
        }

        .sum-point.blue {
            color: #3875d7;
            /*border-color: #3875d7;*/
        }

        .player.red {
            color: #ed2433;
            /*border-color: #ed2433;*/
        }

        .player.blue {
            color: #3875d7;
            /*border-color: #3875d7;*/
        }

        /* 小屏幕（平板，大于等于 768px） */
        @media (min-width: 768px) {
            html {
                font-size: 24px;
            }
        }

        /* 中等屏幕（桌面显示器，大于等于 992px） */
        @media (min-width: 992px) {
            html {
                font-size: 30px;
            }
        }

        @media (min-width: 1200px) {
            html {
                font-size: 34px;
            }
        }

        @media (min-width: 1300px) {
            html {
                font-size: 36px;
            }
        }

        @media (min-width: 1400px) {
            html {
                font-size: 38px;
            }
        }

        @media (min-width: 1600px) {
            html {
                font-size: 42px;
            }
        }

        @media (min-width: 1800px) {
            html {
                font-size: 50px;
            }
        }
</style>
